<template>
	<view>
		<!-- v-for="(feed, index) in feeds" :key="index" -->
		<view class="feeds-box" v-for="feeds in showFeedsList" :key="feeds.id">
			<view class="feeds-box">
				<u-row gutter="10">
					<u-col span="8"  @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ feeds[0].id)">
						<image class="gird-img1" :src="feeds[0].cover" mode=""></image>
					</u-col>
					<u-col span="4">
						<u-row>
							<u-col @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ feeds[1].id)" >
								<image class="gird-img2" :src="feeds[1].cover" mode=""></image>
							</u-col>
						</u-row>
						<u-row>
							<u-col @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ feeds[2].id)" >
								<image class="gird-img2" :src="feeds[2].cover" mode=""></image>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
				<u-row gutter="10">
					<u-col span="4" @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ feeds[3].id)" >
						<image class="gird-img2" :src="feeds[3].cover" mode=""></image>
					</u-col>
					<u-col span="4" @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ feeds[4].id)" >
						<image class="gird-img2" :src="feeds[4].cover" mode=""></image>
					</u-col>
					<u-col span="4" @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ feeds[5].id)" >
						<image class="gird-img2" :src="feeds[5].cover" mode=""></image>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFeeds
	} from 'config/api.js'
	
	export default {
		data() {
			return {
				// 列表数据
				feedsList: [],
				// 展示的数据
				showFeedsList: []
			}
		},
		async onLoad() {
			this.feedsLists = []
			this.getFds()
		},
		// 下拉顶部请求数据
		onPullDownRefresh() {
			this.feedsLists = []
			this.showFeedsList = []
			console.log('下拉刷新页面')
			this.getFds()
		},
		// 上拉刷新数据
		onReachBottom() {
			console.log('上拉刷新页面')
			
			this.getFds()
		},
		methods: {
			async getFds() {
				const fdsData = await getFeeds()
				let feedsDatas = fdsData.feeds.map(item => {
					return {
						id: item.id,
						cover: this.BaseFileURL + item.images[0].file
					}
				})
				this.feedsLists = [...this.feedsLists, ...feedsDatas]
				// 第一组展示包含六张图片
				let showArrList = []
				for (let i = 0; i < this.feedsLists.length; i++) {
					if (i % 6 === 0) {
						showArrList.push(this.feedsLists.slice(i, i + 6))
					}
				}
				this.showFeedsList = showArrList
			},
			onPageChanged(url){
				console.log(1111, url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gird-img1 {
		width: 500upx;
		height: 400upx;
	}

	.gird-img2 {
		width: 250upx;
		height: 200upx;
	}
</style>
